<template>
  <div>
    <div class="tab-bar">
        <div v-for="(tab,index) in TabText" :key="index" :class="{'active':activeIndex==index}" @click="tabClick(index,tab.type)">{{tab.name}}</div>
    </div>

    <div :hidden="activeIndex != 0">
      <couponsItem :type="'0'" :show="activeIndex == 0"></couponsItem>
    </div>
    <div :hidden="activeIndex != 1">
      <couponsItem :type="1" :show="activeIndex == 1"></couponsItem>
    </div>
    <div :hidden="activeIndex != 2">
      <couponsItem  :type="2" :show="activeIndex == 2"></couponsItem>
    </div>
  </div>
</template>

<script>
import couponsItem from '@/components/coupons-item'
export default {
  data() {
    return {
      activeIndex: 0,
      TabText: [
        { type: 0, name: '可使用' },
        { type: 1, name: '已使用' },
        { type: 2, name: '已过期' }
      ]
    }
  },
  onLoad() {
    this.$wx.setTitleBarTitle('优惠券列表');
  },
  methods: {
    tabClick(index, type) {
      this.activeIndex = index
    }
  },
  mounted() {
  },
  components: {
    couponsItem
  }
}
</script>

<style scoped>


</style>
